<template>
	<div class="inline nosel Crystal" :style="{ color: color[crystal.quality] }">
		<div class="image" :class="`_crystal-${path(crystal.image)}`" />
		<div class="inline name">{{crystal.name}}</div>
	</div>
</template>

<script>
	const color = {
		1: '#d3d3d3',
		3: '#218EDA',
		4: '#C841E0',
		5: '#DC6727',
	};

	const crystals = {
		5001: {
			name: '堕天',
			quality: 1,
			image: 'black/angel04'
		},
		5002: {
			name: '统治',
			quality: 1,
			image: 'black/crow04'
		},
		5003: {
			name: '死亡',
			quality: 1,
			image: 'black/death04'
		},
		5004: {
			name: '抵御',
			quality: 1,
			image: 'black/defence04'
		},
		5005: {
			name: '恶魔',
			quality: 1,
			image: 'black/demon04'
		},
		5006: {
			name: '宿命',
			quality: 3,
			image: 'black/destiny04'
		},
		5007: {
			name: '灼烧',
			quality: 3,
			image: 'black/fire04'
		},
		5008: {
			name: '宝藏',
			quality: 4,
			image: 'black/grail04'
		},
		5009: {
			name: '凛霜',
			quality: 4,
			image: 'black/ice04'
		},
		5010: {
			name: '裁决',
			quality: 4,
			image: 'black/judge04'
		},
		5011: {
			name: '法则',
			quality: 4,
			image: 'black/justice04'
		},
		5012: {
			name: '魔法',
			quality: 4,
			image: 'black/magic04'
		},
		5013: {
			name: '暴力',
			quality: 4,
			image: 'black/power04'
		},
		5014: {
			name: '雷霆',
			quality: 5,
			image: 'black/thund04'
		},
		5015: {
			name: '堡垒',
			quality: 5,
			image: 'black/town04'
		},
		5016: {
			name: '杀戮',
			quality: 5,
			image: 'black/war04'
		},
		5017: {
			name: '秘密',
			quality: 5,
			image: 'black/wisdom04'
		},
		5018: {
			name: '领域',
			quality: 5,
			image: 'black/world04'
		},
		5019: {
			name: '天使',
			quality: 1,
			image: 'white/angel04'
		},
		5020: {
			name: '王权',
			quality: 1,
			image: 'white/crow04'
		},
		5021: {
			name: '安息',
			quality: 1,
			image: 'white/death04'
		},
		5022: {
			name: '守护',
			quality: 1,
			image: 'white/defence04'
		},
		5023: {
			name: '魔鬼',
			quality: 1,
			image: 'white/demon04'
		},
		5024: {
			name: '命运',
			quality: 3,
			image: 'white/destiny04'
		},
		5025: {
			name: '热诚',
			quality: 3,
			image: 'white/fire04'
		},
		5026: {
			name: '圣杯',
			quality: 4,
			image: 'white/grail04'
		},
		5027: {
			name: '冰霜',
			quality: 4,
			image: 'white/ice04'
		},
		5028: {
			name: '审判',
			quality: 4,
			image: 'white/judge04'
		},
		5029: {
			name: '正义',
			quality: 4,
			image: 'white/justice04'
		},
		5030: {
			name: '圣言',
			quality: 4,
			image: 'white/magic04'
		},
		5031: {
			name: '力量',
			quality: 4,
			image: 'white/power04'
		},
		5032: {
			name: '闪电',
			quality: 5,
			image: 'white/thund04'
		},
		5033: {
			name: '要塞',
			quality: 5,
			image: 'white/town04'
		},
		5034: {
			name: '战争',
			quality: 5,
			image: 'white/war04'
		},
		5035: {
			name: '智慧',
			quality: 5,
			image: 'white/wisdom04'
		},
		5036: {
			name: '世界',
			quality: 5,
			image: 'white/world04'
		}

	};

	export default {
		props: {
			id: {
				type: Number,
				default: null
			}
		},
		data: () => ({
			color,
			crystals,
		}),
		computed: {
			crystal() {
				return crystals[this.id] || { image: '' };
			}
		},
		methods: {
			path(image) {
				return image.replace(/\//g, '-');
			}
		}
	};
</script>

<style lang="sass" scoped>
.Crystal
	width: lh(4)
	height: lh(5)

	font-size: 0px
	text-align: center

	>.image
		position: relative

		$size: lh(4)
		@each $item in $listCrystal
			$item-name: nth($item, 10)
			&._#{$item-name}
				@include sprite($item, $size, $size)

	>.name
		position: relative

		top: -5px

		margin-left: 0px

		font-size: fs(-1)
		line-height: lh()
</style>